<template>
  <div id="vue41">
    <div class="div1">
      <h5>简易图书管理</h5>
      <p class="label">
        <label>id: <input type="number" placeholder="请输入序号" v-model="id" required min=1> </label>
        <label>图书名称: <input type="text" placeholder="请输入图书名称" v-model="bookname" required> </label>
        <label>出版社: <input type="text" placeholder="请输入出版社" v-model="press" required> </label>
        <label>作者: <input type="text" placeholder="请输入作者" v-model="author" required> </label>
        <button @click="add" class="addBtn">添加</button>
        <button class="update" @click="update" :disabled="status">更新</button>
      </p>
      <p class="search">
        <label>请输入搜索关键字:
          <input type="text" placeholder="请输入搜索关键字" v-model="keyword">
        </label>
        <button @click="search(keyword)">搜索</button>
      </p>
      <div class="table">
        <el-table :data="dataSource" border style="width: 100%" max-height="400">
          <el-table-column fixed align="center" prop="id" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="bookname" align="center" label="图书名称" width="200">
          </el-table-column>
          <el-table-column prop="press" align="center" label="出版社" width="200">
          </el-table-column>
          <el-table-column prop="author" align="center" label="作者" width="200">
          </el-table-column>
          <el-table-column prop="ptime" align="center" label="时间" width="300">
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="250">
            <template slot-scope="{row}">
              <button class="btn" @click="editBook(row, row.id)">{{ row.operation[0] }}</button>
              <button @click="deleteBook(row)">{{ row.operation[1] }}</button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <h5 v-if="state">图书库存不足，请添加库存</h5>
      <h5 v-else>共{{ dataSource.length }}本书</h5>
    </div>
  </div>
</template>

<script>
function dateFormat (date) {
  const dy = date.getFullYear()
  const dm = date.getMonth() + 1
  const dd = date.getDate()
  const dh = date.getHours()
  const dms = date.getMinutes()
  const ds = date.getSeconds()
  return `${dy}-${dm}-${dd}  ${dh}:${dms}:${ds}` // 正则表达式
  // return dy+"-"+dm+"-"+dd+"  "+dh+":"+dms+":"+ds    //字符串
}
export default {
  name: 'BooksView',
  data () {
    return {
      // 书籍数量状态
      state: false,
      // 按钮状态
      status: true,
      // 存放已经有的id
      othIdArr: [],
      // 关键字搜索出的数据
      keyArr: [],
      // 临时变量
      data: [],
      // 当前项
      currIndex: '',
      trClass: 'tr1',
      keyword: '',
      id: '',
      bookname: '',
      press: '',
      author: '',
      dataSource: [],
      bookLists: [{
        id: '1',
        bookname: 'Web前端开发技术',
        press: '清华大学出版社',
        author: '储久良',
        ptime: new Date(),
        operation: ['编辑', '删除']
      },
      {
        id: '2',
        bookname: 'Java程序设计',
        press: '电子工业出版社',
        author: '耿祥义',
        ptime: new Date(),
        operation: ['编辑', '删除']
      },
      {
        id: '3',
        bookname: 'JavaScript高级程序设计',
        press: '高等教育出版社',
        author: '张路路',
        ptime: new Date(),
        operation: ['编辑', '删除']
      }
      ]
    }
  },

  created () {
    this.dataSource = JSON.parse(JSON.stringify(this.bookLists))
    this.dataSource.forEach(item => {
      item.ptime = dateFormat(new Date())
    })
  },
  methods: {
    add () {
      // 数据不为空，才能添加
      if (this.id !== '' && this.bookname !== '' && this.press !== '' && this.author !== '') {
        if (this.dataSource.find(x => x.id === this.id)) {
          alert('该书id已存在，请选择未被使用的id添加图书')
          return
        }
        this.dataSource.push({
          id: this.id,
          bookname: this.bookname,
          press: this.press,
          author: this.author,
          ptime: new Date(),
          operation: ['编辑', '删除']
        })
        this.state = false
      } else {
        alert('图书数据不完整！，请补充！！')
      }
      this.id = ''
      this.bookname = ''
    },
    deleteBook (item) {
      const index = this.dataSource.findIndex(x => x.id === item.id)
      this.dataSource.splice(index, 1)
      if (this.dataSource.length === 0) {
        this.state = true
      } else {
        this.state = false
      }
      // 将删除项的id从数组中删除
      this.IdArr = this.IdArr.filter(x => {
        return x !== item.id
      })
      // 删除完后更新数据
      this.update()
    },
    search (bname) { // 返回满足条件的图书数组
      // if (bname === '' || bname === ' ') {
      //   this.dataSource = this.data
      // } else {
      //   this.dataSource.forEach(item => {
      //     if (item.bookname.indexOf(bname) !== -1) {
      //       this.keyArr.push(item)
      //     }
      //   })
      //   this.dataSource = this.keyArr
      //   this.keyArr = []
      // }
    },
    // 编辑图书
    editBook (item, i) {
      // 有数据传递过来
      this.status = false
      document.querySelector('.update').style.backgroundColor = 'green'
      // 获取要编辑的当前书籍序号
      this.currIndex = i
      // 获取到图书信息,并绑定到界面
      this.id = item.id
      this.bookname = item.bookname
      this.press = item.press
      this.author = item.author
    },
    // 更新数据
    update () {
      // 当前要修改的书籍序号
      const id = this.currIndex
      const findList = this.dataSource.find(item => {
        return item.id === id
      })
      // 点击更新后，删除了该项
      if (!findList) {
        this.status = true
        document.querySelector('.update').style.backgroundColor = 'grey'
        alert('当前书籍不存在')
      }
      // 进行修改
      // console.log(findList)
      const index = this.dataSource.findIndex(x => x.id === id)
      const IdArr = this.dataSource.filter(item => {
        return item.id !== id
      })

      IdArr.forEach(item => {
        this.othIdArr.push(item.id)
      })

      if (this.othIdArr.includes(this.id)) {
        alert('当前书籍id已经存在')
      } else {
        this.dataSource[index].id = this.id
        this.dataSource[index].bookname = this.bookname
        this.dataSource[index].author = this.author
        this.dataSource[index].press = this.press
        this.currIndex = this.id
      }
    }
  }
}

</script>

<style lang="less" scoped>
/* index-4-1.css */
/* 定义图层的样式   */
#vue41 {
  padding-top: 50px;

  .div1 {
    margin: 0 auto;
    width: 1000px;
    height: 600px;
    align-items: center;
    border: 1px dashed #55ed89;

    h5 {
      margin-bottom: 30px;
    }
  }

  label {
    margin-right: 15px;
  }

  .label {
    margin-bottom: 20px;
  }

  .addBtn {
    margin-right: 5px;
  }

  /* 设置表格样式 */
  .table {
    border: 1px solid #42B983;
    width: 950px;
    border-collapse: collapse;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .search {
    text-align: center;
  }

  /* 定义表格表头样式 */
  th {
    background: #ABB983;
  }

  /* 定义表格行的样式 */
  .tr1 {
    height: 50px;
    padding: 5px auto;
  }

  /*定义h5标记样式 */
  h5 {
    text-align: center;
    color: #0033CC;
    padding: 15px;
    background: #AFAFAF;
    font-size: 28px;
    height: 58px;
  }

  /*定义input标记样式 */
  input {
    border-radius: 8px;
    width: 140px;
    height: 35px;
    border: 1px dashed #008000;
  }

  /*定义button,超链接标记样式 */
  button,
  .btn-success {
    border-radius: 8px;
    width: 80px;
    height: 35px;
    background: #008000;
    color: white;
  }

  /* 定义超链接样式 */
  a {
    padding: 8px 10px;
  }

  .update {
    margin-top: 10px;
    background-color: grey;
  }

  .store {
    height: 50px;
  }

  .store>div {
    height: 100%;
    line-height: 50px;
  }
}

.btn {
  margin-right: 10px;
}</style>
